<template>
    <div class="apply settle-sub-box">
        <div class="fill-in">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="1.5rem" :show-message="false"
                     :label-position="'top'" class="form clearfix">
                <!--                <div class="title">基本信息</div>-->
                <el-form-item label="姓名" prop="name">
                    <el-input placeholder="请输入陪护家属姓名" v-model="ruleForm.name" @blur="$method.inputBlur()"></el-input>
                </el-form-item>
                <el-form-item label="身份证号" prop="idCard">
                    <el-input placeholder="请输入陪护家属身份证号或照片识别" v-model="ruleForm.idCard" @blur="$method.inputBlur()">
                        <el-button slot="append" icon="el-icon-camera-solid"
                                   @click="$router.push($route.path+'/uploadCardId')"></el-button>
                    </el-input>
                </el-form-item>
                <el-form-item label="手机号码" prop="phone" class="is-required">
                    <el-input placeholder="请输入陪护家属手机号码" v-model="ruleForm.phone" type="number"
                              @blur="$method.inputBlur()"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <el-button type="primary" class="submit" @click="submitForm('ruleForm')">提交</el-button>
        <form name="imgForm" style="display:none;"></form>
        <router-view @updateInfo="updateInfo"></router-view>
    </div>
</template>

<script>
    export default {
        data() {
            let validatePhone = (rule, value, callback) => {
                if (!/^1\d{10}$/.test(value)) {
                    callback(new Error('手机号格式错误'))
                } else {
                    callback()
                }
            }
            return {
                ruleForm: {
                    name: '',
                    cardType: '1',
                    idCard: '',
                    phone: ''
                },
                rules: {
                    name: [
                        {required: true, message: '请填写姓名', trigger: 'blur'}
                    ],
                    phone: [
                        {required: true, message: '请填写手机号', trigger: 'blur'},
                        {validator: validatePhone, trigger: 'blur'}
                    ],
                    idCard: [
                        {required: true, message: '请填写身份证号', trigger: 'blur'}
                    ]
                },
                role: '', // 身份类型
                idCardMessage: {} // 身份证信息
            }
        },
        updated() {
            if (this.idCardMessage.idnumber) this.ruleForm.idCard = this.idCardMessage.idnumber
            if (this.idCardMessage.name) this.ruleForm.name = this.idCardMessage.name
        },
        mounted() {
            this.$emit('footerHide')
        },
        methods: {
            updateInfo(name, info) {
                this[name] = info
            },
            validate(formName, callback) {
                this.$refs[formName].validate((valid, obj) => {
                    if (valid) {
                        if (callback) callback()
                    } else {
                        this.$method.showToast(obj[Object.keys(obj)[0]][0].message)
                        return false
                    }
                })
            },
            submitForm(formName) {
                this.validate('ruleForm', () => {
                    this.submit()
                })
            },
            submit() {
                let _this = this,
                    params = {
                        type: this.role,
                        idCard: this.ruleForm.idCard, // 证件号
                        name: this.ruleForm.name, // 姓名
                        phone: this.ruleForm.phone // 手机号
                    }
                this.$http.post('/patientAddRelation', params).then(result => {
                    if (result.success) {
                        _this.$method.historyBack()
                        _this.$refs.ruleForm.resetFields()
                    }
                })
            }
        },
        components: {}
    }
</script>

<style scoped lang="less">
    .apply {
        background-color: #fff;
        padding: .3rem;
    }

    .form {
        /deep/ .el-form-item {
            font-size: .28rem;
            /*border-bottom: 1px solid #EBEBEB;*/
            background-color: #fff;
            margin-bottom: .15rem;
            /*padding: .1rem 0;*/

            .el-form-item__label {
                color: #333;
                padding: 0 0 0 .2rem;
                font-size: .28rem;
                line-height: .48rem;
            }

            .el-form-item__content {
                position: relative;
                font-size: .28rem;
                line-height: .5rem;
                margin-top: .1rem;
                border: 1px solid #EBEBEB;
                border-radius: .05rem;
            }

            .el-input {
                font-size: .28rem;

                input {
                    padding: 0 .2rem;
                    border: 0 none;
                    height: .68rem;
                    line-height: .68rem;
                    border-radius: 2px;
                    /*border-color: rgba(255, 184, 203);*/
                }

                .el-input-group__append {
                    border: 0 none;
                    background-color: transparent;
                    padding: 0 .2rem;

                    .el-button {
                        i {
                            font-size: .48rem;
                        }
                    }
                }
            }

            .el-button {
                font-size: .28rem;
            }

            &.custom-label {
                padding: .1rem .2rem;

                .el-form-item__label {
                    padding-left: 0;
                    width: 100%;

                    .is-required {
                        &:before {
                            content: '*';
                            color: #F56C6C;
                            margin-right: 4px;
                        }
                    }
                }
            }

            &.form-item-top {
                margin-top: -.2rem;
                border-top: 1px solid #eee;
            }

            &.is-error {
                input {
                    /*background-color: rgba(255, 184, 203, .3);*/
                    /*border: 1px solid rgba(255, 184, 203);*/
                }
            }

            &:last-child {
                margin-bottom: 0;
            }
        }
    }

    .submit {
        display: block;
        width: 100%;
        margin-top: .5rem;
        height: .88rem;
        border-radius: .5rem;
        background-color: #598CDA;
        border-color: #598CDA;
    }
</style>
